<template>
    <div class="pages_my">
        <div class="header">{{ $t('my') }}</div>
        <div class="pages_view">
            <div class="lemon-sidebar__scroll side_left">
                <div class="side_left_item" v-for="item in list" :key="item.type"
                    :class="active == item.type ? 'active' : ''" @click="change(item.type)">
                    <img :src="item.img" alt="">
                    <div class="name">{{ item.name }}</div>
                    <div class="number" v-if="item.type=='dynamic'&&unread_count>0">{{ unread_count }}</div>
                </div>
            </div>
            <div class="lemon-sidebar__scroll router_view">
                <router-view />
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    data() {
        return {
            list: [],
            active: "wallet",
        }
    },
    computed: {
        ...mapState({
            locale: state => state.locale,
            unread_count: state => state.unread_count
        })
    },
    watch: {
        locale: {
            handler() {
                this.setList();
                // 列表更新后，重新根据路由设置 active 状态
                this.$nextTick(() => {
                    this.updateActiveByRoute(this.$route);
                });
            },
            immediate: true
        },
        // 监听路由变化，确保在子路由刷新时也能正确设置 active 状态
        '$route': {
            handler(to) {
                this.updateActiveByRoute(to);
            },
            immediate: true
        }
    },
    created() {
        // 初始化时根据当前路由设置 active 状态
        this.updateActiveByRoute(this.$route);
    },
    methods: {
        /**
         * 根据路由名称更新 active 状态
         * 这个方法会将子路由名称映射到对应的父路由（菜单项 type）
         * @param {Object} route - 当前路由对象
         */
        updateActiveByRoute(route) {
            // 如果 list 还未初始化，直接返回，等待 list 初始化后再调用
            if (!this.list || this.list.length === 0) {
                return;
            }

            const routeName = route.name;
            // 子路由到父路由的映射关系
            // 例如：addDynamic, dynamicDeta 等子路由都应该映射到 dynamic
            const routeMap = {
                'addDynamic': 'dynamic',
                'dynamicDeta': 'dynamic',
                'singleUserDynamic': 'dynamic',
                'myDynamic': 'dynamic'
            };

            // 如果当前路由在映射表中，使用映射后的值；否则直接使用路由名称
            const targetType = routeMap[routeName] || routeName;

            // 从 list 数组中动态获取所有菜单项的 type，用于验证
            // 这种方式更灵活，当菜单项变化时不需要修改硬编码的数组
            // 参考 Home.vue 的实现方式，使用动态数据而不是硬编码
            const menuTypes = this.list.map(item => item.type);

            // 检查该 type 是否在菜单列表中
            if (menuTypes.includes(targetType)) {
                this.active = targetType;
            } else {
                // 如果不在列表中，使用第一个菜单项作为默认值（防止 active 为空）
                this.active = this.list[0].type;
            }
        },
        /**
         * 切换菜单项
         * @param {String} value - 菜单项的 type 值
         */
        change(value) {
            if (this.active === value) return;
            this.active = value;
            this.$router.replace({
                name: value
            })
        },
        setList() {
            this.list = [{
                name: this.$t('my.我的钱包'),
                img: require('@/assets/image/m1.png'),
                type: "wallet"
            }, {
                name: this.$t('my.我的订单'),
                img: require('@/assets/image/m2.png'),
                type: "order"
            }, {
                name: this.$t('my.我的商城'),
                img: require('@/assets/image/m3.png'),
                type: "myMall"
            }, {
                name: this.$t('my.朋友圈'),
                img: require('@/assets/image/m4.png'),
                type: "dynamic"
            }, {
                name: this.$t('my.导航'),
                img: require('@/assets/image/m5.png'),
                type: "nav"
            }, {
                name: this.$t('my.语言设置'),
                img: require('@/assets/image/m6.png'),
                type: "language"
            }, {
                name: this.$t('my.我的邀请码'),
                img: require('@/assets/image/m7.png'),
                type: "invitationCode"
            }, {
                name: this.$t('my.隐私安全'),
                img: require('@/assets/image/m8.png'),
                type: "article"
            },
            {
                name: this.$t('my.排行榜'),
                img: require('@/assets/image/m9.png'),
                type: "ranking"
            },
            {
                name: this.$t('my.我的视频'),
                img: require('@/assets/image/m10.png'),
                type: "video"
            },
            {
                name: this.$t('my.退出登录'),
                img: require('@/assets/image/m11.png'),
                type: "out"
            }]
        }
    }
}
</script>
<style lang="scss">
.pages_my {
    flex: 1;
    // overflow: hidden;
    background: #EDEDED;
    display: flex;
    flex-direction: column;

    .header {
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        color: #333333;
        text-indent: 24px;
        background: #FCFCFE;
    }

    .pages_view {
        display: flex;
        flex: 1;
        overflow: hidden;

        .side_left {
            width: 314px;
            height: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            background: #FCFCFE;
            box-shadow: inset -1px 0px 0px 0px rgba(104, 104, 104, 0.1);
            overflow-y: auto;

            &_item {
                height: 88px;
                padding: 0 24px;
                box-sizing: border-box;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: space-between;

                &.active {
                    background-color: #D9E7FE;
                }

                &:hover:not(&.active) {
                    background: #e3e3e3
                }

                img {
                    width: 52px;
                    height: 52px;
                }

                .name {
                    flex: 1;
                    margin-left: 12px;
                    font-size: 18px;
                    color: #333333;

                    &.badge {
                        width: 16px;
                        height: 20px;
                        line-height: 20px;
                        text-align: center;
                        color: #fff;
                        font-size: 12px;
                        border-radius: 9px;
                        background: #FA5151;
                    }
                }

                .number {
                    height: 18px;
                    min-width: 25px;
                    color: #fff;
                    font-size: 12px;
                    text-align: center;
                    border-radius: 10px;
                    padding: 0 3px;
                    background: #f75444;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        .router_view {
            flex: 1;
            padding: 18px 24px 0;
            box-sizing: border-box;
            background: #EDEDED;
            overflow-y: auto;
            // display: flex;

            // position: relative;
        }
    }
}
</style>
